<script setup lang="ts">


import { ref, onMounted } from "vue";
import Toolbar from 'primevue/toolbar';

import VerticalBar from '@/views/pages/charts/VerticalBar.vue'
import HorizontalBar from '@/views/pages/charts/HorizontalBar.vue'
import Pie from '@/views/pages/charts/Pie.vue'
import MultAxisLine from '@/views/pages/charts/MultAxisLine.vue'
import Combo from '@/views/pages/charts/Combo.vue'

import Radar from '@/views/pages/charts/Radar.vue'

onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});

const chartData = ref();
const chartOptions = ref();

const setChartData = () => {
    return {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [
            {
                label: 'Sales',
                data: [540, 325, 702, 620],
                backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246 0.2)'],
                borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
                borderWidth: 1
            }
        ]
    };
};
const setChartOptions = () => {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--text-color');
    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');

    return {
        plugins: {
            legend: {
                labels: {
                    color: textColor
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder
                }
            },
            y: {
                beginAtZero: true,
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder
                }
            }
        }
    };
}

// 班级名称

const examNames = ref([
    { name: '2024三校联考一模' },
    { name: '2024三校联考二模' },
    { name: '2024三校联考三模' },
]);
const selectedExam = ref({ name: '2024三校联考一模' });

// 班级名称
const selectedClass = ref({ name: '全校班级', code: 'NY' });
const classNames = ref([
    { name: '全校班级', code: 'NY' },
    { name: '高三985班', code: 'NY' },
    { name: '高三211班', code: 'RM' },
    { name: '高三112班', code: 'LDN' },
]);


</script>

<template>

    <Toolbar class="mb-4 p-2.5">
        <template #start>
            <div class="flex items-center mr-5">
                <label>考试名称:&nbsp;</label>
                <Dropdown v-model="selectedExam" :options="examNames" optionLabel="name" placeholder="Select a City"
                    class="md:w-14rem" />
            </div>

            <div class="flex items-center mr-5">
                <label>班级名称:&nbsp;</label>
                <Dropdown v-model="selectedClass" :options="classNames" optionLabel="name" placeholder="Select a City"
                    class="md:w-14rem" />
            </div>

            <Button label="查询" icon="pi pi-search" severity="success" class="mr-2" @click="" />

        </template>

        <template #end>
            <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import"
                class="mr-2 inline-block" />
            <Button label="下载报告" icon="pi pi-download" severity="help" />
        </template>
    </Toolbar>
    <div class="flex ">
        <!-- <Chart type="bar" :data="chartData" :options="chartOptions" />
        <VerticalBar /> -->
        <div class="flex-auto w-32">
            <HorizontalBar />
            <MultAxisLine />
        </div>
        <div class="flex-auto w-64">
            <VerticalBar />
            <Combo/>
        </div>
        <div class="flex-1">
            <Pie />
            <Radar/>
        </div>

    </div>
</template>
<style scoped lang="scss"></style>